<template>
  <div class="answerResult page-exp">
    <pageHeader></pageHeader>
    <div class="container">
      <div class="content">
        <h1>{{examName}}</h1>
        <div class="flex-r diaploama">
          <img :src="diaploama" alt />
          <span class="finalScore">{{examResult.finalScore}}</span>
          <div class="score flex-cs">
            <p class="title">本次模考成绩</p>
            <p>考试时间：{{examResult.createTime}}</p>
            <p>用时：{{tool.getCookie("xinyun-front-answer-time")?tool.getCookie("xinyun-front-answer-time"):"-"}}</p>
            <p>总分：100分</p>
            <div class="details flex-r">
              <div class="flex-c">
                <p class="total">{{examResult.totalQuestion}}道</p>
                <p>总题数</p>
              </div>
              <div class="flex-c">
                <p class="answer">{{examResult.totalQuestion}}道</p>
                <p>总答题</p>
              </div>
              <div class="flex-c">
                <p class="accuracy">{{examResult.accuracy}}</p>
                <p>正确率</p>
              </div>
              <div class="flex-c">
                <p class="credits">+{{examResult.score}}</p>
                <p>积分数</p>
              </div>
            </div>
          </div>
        </div>
        <div class="btnGroup flex-r">
          <el-button round @click="goHome">返回首页</el-button>
          <!-- <el-button round @click="goReview">考题回顾</el-button> -->
          <el-button round @click="goMistake">错题回顾</el-button>
        </div>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>
<script>
import pageHeader from "@/components/PageHeader.vue";
import PageFooter from "@/components/PageFooter.vue";
export default {
  name: "entranceExam-answerResult",
  components: {
    pageHeader,
    PageFooter
  },
  data() {
    return {
      examId: this.$route.query.examId,
      examName: this.$route.query.name,
      examInfo: this.$route.query.examInfo,
      examResult: "",
      diaploama: require("@/assets/img/entranceExam/diploma.png")
    };
  },
  created() {
    this.getExamResult();
  },
  methods: {
    getExamResult() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/exam/v1/getExamResult",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo"))
              .userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/exam/v1/getExamResult", time),
            timestamp: time
          },
          data: {
            examId: that.examId
          }
        })
        .then(res => {
          if (res.retCode == "00000") {
            that.examResult = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    goHome() {
      this.$router.push({
        path: "/home",
        query: {}
      });
    },
    goReview() {
      this.$router.push({
        path: "/entranceExam/detail",
        query: {
          id: this.examId
        }
      });
    },
    // 错题回顾
    goMistake() {
      this.$router.push({
        path: "/entranceExam/mistake",
        query: {
          id: this.examId,
          name: this.examName,
          type: "mistake",
          examInfo: this.examInfo
        }
      });
    }
  }
};
</script>
<style scoped>
.answerResult {
  min-width: 1200px;
}
.container {
  flex: 1;
  background: #f2f2f2;
}
.content {
  width: 1200px;
  background: #fff;
  margin: 40px auto;
  padding: 40px 137px 100px;
  box-sizing: border-box;
}
.content h1 {
  font-size: 21px;
  color: #1e1e1e;
  letter-spacing: 0.08px;
  line-height: 39px;
  text-align: center;
}
.diaploama {
  height: 450px;
  position: relative;
}
.diaploama img {
  width: 400px;
  height: 400px;
  object-fit: contain;
  margin-right: 70px;
}
.diaploama .finalScore {
  position: absolute;
  top: 48%;
  left: 27%;
  font-size: 40px;
  color: #fff;
  font-weight: bold;
  width: 80px;
  text-align: center;
}
.score .title {
  font-size: 48px;
  color: #2178e1;
  letter-spacing: 0.19px;
  margin-bottom: 18px;
}
.score p {
  font-size: 18px;
  color: #444444;
  letter-spacing: 0.07px;
  margin-bottom: 8px;
}
.score .details {
  margin-top: 30px;
}
.score .details div {
  margin-right: 20px;
}
.score .details div p {
  font-size: 12px;
  color: #4d4d4d;
  letter-spacing: 0.05px;
}
.score .details div p:last-child {
  margin-top: 4px;
}
.score .total {
  font-size: 24px !important;
  color: #dc8100 !important;
  letter-spacing: 0.09px !important;
}
.score .answer {
  font-size: 24px !important;
  color: #3ab5bb !important;
  letter-spacing: 0.09px !important;
}
.score .accuracy {
  font-size: 24px !important;
  color: #2178e1 !important;
  letter-spacing: 0.09px !important;
}
.score .credits {
  font-size: 24px !important;
  color: #eac829 !important;
  letter-spacing: 0.09px !important;
}
.content .btnGroup .el-button:nth-child(1) {
  background: #05ad93;
  color: #fff;
}
.content .btnGroup .el-button:nth-child(2) {
  background: #05ad1d;
  color: #fff;
}
.content .btnGroup .el-button:nth-child(3) {
  background: #084dcd;
  color: #fff;
}
</style>